body {
    /* background: green; */
}
.container {
    --sm-1-width: calc((100% - 9 * var(--gap-width)) / 8);
    --sm-2-width: calc((100% - 9 * var(--gap-width)) / 4 + var(--gap-width));
    --sm-3-width: calc((100% - 9 * var(--gap-width)) * 3 / 8 + var(--gap-width) * 2);
    --sm-4-width: calc((100% - 9 * var(--gap-width)) / 2 + var(--gap-width) * 3);
    --sm-5-width: calc((100% - 9 * var(--gap-width)) * 5 / 8 + var(--gap-width) * 4);
    --sm-6-width: calc((100% - 9 * var(--gap-width)) * 6 / 8 + var(--gap-width) * 5);
    --sm-7-width: calc((100% - 9 * var(--gap-width)) * 7 / 8 + var(--gap-width) * 6);
    --sm-8-width: calc(100% - 2 * var(--gap-width));
    --sm-1-left: calc(var(--sm-1-width) + 2 * var(--gap-width));
    --sm-2-left: calc(var(--sm-2-width) + 2 * var(--gap-width));
    --sm-3-left: calc(var(--sm-3-width) + 2 * var(--gap-width));
    --sm-4-left: calc(var(--sm-4-width) + 2 * var(--gap-width));
    --sm-5-left: calc(var(--sm-5-width) + 2 * var(--gap-width));
    --sm-6-left: calc(var(--sm-6-width) + 2 * var(--gap-width));
    --sm-7-left: calc(var(--sm-7-width) + 2 * var(--gap-width));
}
.col-sm-1 {
    width: var(--sm-1-width);
}
.col-sm-2 {
    width: var(--sm-2-width);
}
.col-sm-3 {
    width: var(--sm-3-width);
}
.col-sm-4 {
    width: var(--sm-4-width);
}
.col-sm-5 {
    width: var(--sm-5-width);
}
.col-sm-6 {
    width: var(--sm-6-width);
}
.col-sm-7 {
    width: var(--sm-7-width);
}
.col-sm-8 {
    width: var(--sm-8-width);
}
.col-sm-span-1 {
    margin-left: var(--sm-1-left);
}
.col-sm-span-2 {
    margin-left: var(--sm-2-left);
}
.col-sm-span-3 {
    margin-left: var(--sm-3-left);
}
.col-sm-span-4 {
    margin-left: var(--sm-4-left);
}
.col-sm-span-5 {
    margin-left: var(--sm-5-left);
}
.col-sm-span-6 {
    margin-left: var(--sm-6-left);
}
.col-sm-span-7 {
    margin-left: var(--sm-7-left);
}

body > .bottom-nav-container {
    display: none;
}

body > .main-aside {
    width: auto;
    transform: unset;
    left: 0px;
}
body > .main-aside > .str-drawer-content {
    width: 216px;
}

body {
    padding-left: 216px;
}

body > .str-bar-top-container>.bar-icon-nav {
    display: none;
}

body>.str-bar-menu>h1 {
    padding-left: 16px;
}
.toast {
    width: 344px;
    left: auto;
}
.page-in {
    animation: page-in .1s forwards ease-in-out;
}
.page-in-reverse {
    animation: page-in-reverse .1s forwards ease-in-out;
}

.page-out {
    animation: page-out .1s forwards ease-in-out;
}

.page-out-reverse {
    animation: page-out-reverse .1s forwards ease-in-out;
}
@keyframes page-in {
    0% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes page-in-reverse {
    to {
        opacity: 0.5;
    }
}

@keyframes page-out {
    to {
        opacity: 0.5;
    }
}

@keyframes page-out-reverse {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}